<template>
	<image src="/static/bg/bg_wdqbtop@2x.png" mode="widthFix" class="img-top"></image>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: 'transparent' }" />

	<view class="fill">
		<view class="points">
			<up-row gutter="12" style="flex-wrap: wrap">
				<up-col span="6" v-for="(item, index) in account" :key="index" style="margin-bottom: 24rpx">
					<view class="layout">
						<view class="top flex items-center justify-between" @click="goUrl(`${item.url}`)">
							<view class="title">{{ item.title }}</view>
							<up-icon name="arrow-right" color="#999" size="12"></up-icon>
						</view>
						<view class="rmb balance">{{ item.balance }}</view>
						<view class="tips">当前可用</view>
					</view>
				</up-col>
			</up-row>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl } from '/service/port';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	const title = ref('');
	onLoad((e) => {
		title.value = e.title;
	});
	const account = ref({});

	onShow(() => {
		getAccountWallet();
	});

	async function getAccountWallet() {
		let res = await port('getAccountWallet');

		account.value = res.data;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.img-top {
		width: 100%;
		height: 482rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.short-btn {
		font-weight: 500;
		font-size: 28rpx;
		color: #fefefe;
		background: linear-gradient(-90deg, #fb3204 0%, #fe7800 100%);
		border-radius: 29rpx;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 45rpx;
	}

	.title {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
	}
	.rmb:before {
		color: #000;
		font-size: 28rpx;
	}

	.wait {
		margin-top: 61rpx;
		.wait-layout {
			.balance {
				font-size: 38rpx;
			}
		}
	}

	.tips {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
		margin-left: 5rpx;
		> text {
			margin-right: 15rpx;
		}
	}

	.fill {
		position: relative;
		margin: 30rpx;
		.points {
			.layout {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 27rpx;

				.balance {
					margin-top: 28rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #000000;
				}
			}
		}

		.bonus {
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 24rpx;
			padding: 27rpx;
			.vss {
				margin-top: 50rpx;
				.left {
					.bonus-balance {
						font-weight: 500;
						font-size: 48rpx;
						color: #000000;
					}
				}
			}
		}

		.divvy {
			margin-top: 24rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 27rpx;
			.wait {
				margin-top: 49rpx;
			}
		}
	}
</style>
